<script setup>
import { valid } from 'mockjs';
import {ref,onMounted} from 'vue'
import {getFollowUp,getCareer,getEducation,getArea,getSpeciality,getSalary,getJobStatus,getDiscipline,getCommunicate,getTrackStatus,getCourseList,updateFollow,returnHighseas,getReturnReason} from '@/api/business'
import { useRoute,useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const route = useRoute()
const router = useRouter()

// 定义表单数据
const followForm = ref({
    name: "",
    phone: "",
    job: "",
    degree: "",
    city: "",
    wechatId: "",
    age: "",
    profession: "",
    incumbentStatus: "",
    salary: "",
    qqNum: "",
    gender: "",
    targetSalary: "",
    remark: "",
    timePlans: "",
    studyReason: "",
    careerPlans: "",
    subjects: "",
    course: "",
    otherNtentions: "",
    createTime: "",
    followStatus: "",
    nextFollowTime: "",
    chatFocus: "",
    chatNotes: "",
    id: null
})

// 定义表单影藏
const inputVisible = ref(true)

// 点击保存 影藏输入框
const hideInput = async () => {
       formRef1.value.validate(valid)
       if(!valid) {
        inputVisible.value = false
       } else {
        inputVisible.value = true
       }
       formRef2.value.validate(valid)
       if(!valid) {
        inputVisible.value = false
       } else {
        inputVisible.value = true
       }
       formRef3.value.validate(valid)
       if(!valid) {
        inputVisible.value = false
       } else {
        inputVisible.value = true
       }
      await updateFollow(followForm.value)
      ElMessage.success('保存成功')
      getFollowUpAPI()
    } 

// 定义表单整体校验
const formRef1 = ref(null)
const formRef2 = ref(null)
const formRef3 = ref(null)

// 定义表单校验规则
const followRules = ref({
    name:[{ required: true, message: '请填写客户姓名', trigger: 'blur' },
    {min: 2,max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}],
    phone:[{ required: true, message: '请填写手机号码', trigger: 'blur' },
    {pattern: /^[1][3-9][0-9]{9}$/,trigger: 'blur', message: '请输入正确的手机号' }],
    subjects:[{ required: true, message: '请选择意向学科', trigger: 'blur' }],
    course:[{ required: true, message: '请选择意向课程', trigger: 'blur' }],
    followStatus:[{ required: true, message: '请选择跟进状态', trigger: 'blur' }],
    nextFollowTime:[{ required: true, message: '请选择下次跟进时间', trigger: 'blur' }],
    chatFocus:[{ required: true, message: '请填写沟通重点', trigger: 'blur' }],
    chatNotes:[{ required: true, message: '请填写沟通纪要', trigger: 'blur' }]
})

// 定义添加合同弹层开关变量
const dialogVisible = ref(false)

// 生命周期
onMounted(()=>{
  getFollowUpAPI()
  getCareerAPI()
  getEducationAPI()
  getAreaAPI()
  getSpecialityAPI()
  getJobStatusAPI()
  getSalaryAPI()
  getDisciplineAPI()
  getCommunicateAPI()
  getTrackStatusAPI()
  getCourseListAPI()
  getReturnReasonAPI()
})

const followData = ref({
  id: null
})

// 历史沟通记录列表
const historyList = ref([])

followData.value.id = (route.params.id) 
// 获取跟进详情方法
const getFollowUpAPI = async()=>{
 const {data} = await getFollowUp(followData.value)
 followForm.value = data
 historyList.value = data.communicationList
   console.log(historyList.value)
}

// 职业数组 
const careerList = ref([])
// 获取职业
const getCareerAPI = async()=>{
 const {data} =  await getCareer()
 careerList.value = data
}

// 学历数组
const educationList = ref([])
// 获取学历
const getEducationAPI = async()=>{
 const {data} =  await getEducation()
 educationList.value = data
}

// 地区列表
const areaList = ref([])
// 获取地区
const getAreaAPI = async()=>{
  const {data} = await getArea()
  areaList.value = data
}

// 专业数组
const specialityList = ref([])
// 获取专业
const getSpecialityAPI = async()=>{
  const {data} = await getSpeciality()
  specialityList.value = data
}

// 在职状态
const jobStatusList = ref([])
// 获取在职状态
const getJobStatusAPI = async()=>{
  const {data} = await getJobStatus()
  jobStatusList.value = data
}

// 期望薪资
const salaryList = ref([])
// 获取期望薪资
const getSalaryAPI = async()=>{
  const {data} = await getSalary()
  salaryList.value = data
}

// 意向学科列表
const disciplineList = ref([])
// 获取意向学科
const getDisciplineAPI = async()=>{
  const {data} = await getDiscipline()
  disciplineList.value = data
}

// 沟通重点数组
const communicateList = ref([])
// 获取沟通重点
const getCommunicateAPI = async()=>{
  const {data} = await getCommunicate()
  communicateList.value = data
}

// 跟进状态数组
const trackStatusList = ref([])
// 获取跟进状态
const getTrackStatusAPI = async()=>{
  const {data} = await getTrackStatus()
  trackStatusList.value = data
}

// 课程列表数组
const courseListList = ref([])
// 获取课程列表
const getCourseListAPI = async()=>{
  const {data} = await getCourseList()
  courseListList.value = data
}

// 定义弹窗开关变量
const showdialog = ref(false)

// 踢回公海
const returnHighseasAPI = async ()=>{
  showdialog.value = true
}

// 课程列表数组
const returnReasonList = ref([])
// 获取课程列表
const getReturnReasonAPI = async()=>{
  const {data} = await getReturnReason()
  returnReasonList.value = data
}

// 定义踢回公海请求对象
const returnData = ref({
  id: null,
  returnReason: ''
})

returnData.value.id = route.params.id

// 踢回公海方法
const returnOk = async()=>{
  await returnHighseas(returnData.value)
  ElMessage.success('踢回成功')
  showdialog.value = false
  router.go(-1)
}

</script>

<template>
    <div class="follow-up">
        <!-- 标题 -->
         <div class="customers">
             <div style="  margin-right: 5px; font-weight: 700;">客户资料</div> 
             <span>ID </span>
         </div>
         <!-- 客户资料表单 -->
         <div class="customers-form">
         <el-form :model="followForm" :rules="followRules" ref="formRef1">
           <el-form-item label="客户姓名" style="margin-left: 60px;" prop="name">
            <el-input v-model="followForm.name" v-show="inputVisible" placeholder="请输入"></el-input>
            <span v-if="!inputVisible">{{ followForm.name }}</span>
           </el-form-item>
           <el-form-item label="手机号" prop="phone">
            <el-input v-model="followForm.phone" placeholder="请输入" v-show="inputVisible" ></el-input>
            <span v-if="!inputVisible">{{ followForm.phone }}</span>
           </el-form-item>
           <el-form-item label="职业" prop="job">
           <el-select v-model="followForm.job" placeholder="请选择" v-show="inputVisible">
             <el-option v-for="item in careerList" :key="item.id" label="" :value="item.content" ></el-option>
           </el-select>
           <span v-if="!inputVisible">{{ followForm.job }}</span>
           </el-form-item>
           <el-form-item label="学历" prop="degree">
             <el-select v-model="followForm.degree" placeholder="请选择" v-show="inputVisible">
               <el-option v-for="item in educationList" :key="item.id" label="" :value="item.content"></el-option>
             </el-select>
             <span v-if="!inputVisible">{{ followForm.degree }}</span>
           </el-form-item>
           <el-form-item label="所在地区" style="margin-left: 60px;" prop="city">
             <el-select v-model="followForm.city"  placeholder="请选择" v-show="inputVisible">
               <el-option v-for="item in areaList" :key="item.id" label="" :value="item.content"></el-option>
             </el-select>
             <span v-if="!inputVisible">{{ followForm.city }}</span>
           </el-form-item>
           <el-form-item label="微信号" prop="wechatId">
            <el-input v-model="followForm.wechatId" placeholder="请输入" v-show="inputVisible"></el-input>
            <span v-if="!inputVisible">{{ followForm.wechatId }}</span>
           </el-form-item>
           <el-form-item label="年龄" prop="age">
             <el-input v-model="followForm.age" placeholder="请输入" v-show="inputVisible"></el-input>
             <span v-if="!inputVisible">{{ followForm.age }}</span>
           </el-form-item>
           <el-form-item label="专业" prop="profession">
             <el-select v-model="followForm.profession" placeholder="请选择" v-show="inputVisible">
               <el-option v-for="item in specialityList" :key="item.id" label="" :value="item.content"></el-option>
             </el-select>
             <span v-if="!inputVisible">{{ followForm.profession }}</span>
           </el-form-item>
           <el-form-item label="在职情况" style="margin-left: 60px;" prop="incumbentStatus">
             <el-select v-model="followForm.incumbentStatus" placeholder="请选择" v-show="inputVisible">
               <el-option v-for="item in jobStatusList" :key="item.id" label="" :value="item.content"></el-option>
             </el-select>
             <span v-if="!inputVisible">{{ followForm.incumbentStatus }}</span>
           </el-form-item>
           <el-form-item label="当前薪资" prop="salary">
            <el-input v-model="followForm.incumbentStatus"  placeholder="请输入" v-show="inputVisible"></el-input>
            <span v-if="!inputVisible">{{ followForm.incumbentStatus }}</span>
           </el-form-item>
           <el-form-item label="QQ" prop="qqNum">
            <el-input v-model="followForm.qqNum" placeholder="请输入" v-show="inputVisible"></el-input>
            <span v-if="!inputVisible">{{ followForm.qqNum }}</span>
           </el-form-item>
           <el-form-item label="性别" prop="gender">
               <el-radio-group v-model="followForm.gender" v-show="inputVisible">
                 <el-radio label="男"></el-radio>
                 <el-radio label="女"></el-radio>
               </el-radio-group>
               <span v-if="!inputVisible">{{ followForm.gender }}</span>
            </el-form-item>
            <el-form-item label="目标薪资" style="margin-left: 60px;" prop="targetSalary">
             <el-select v-model="followForm.targetSalary"  placeholder="请选择" v-show="inputVisible">
               <el-option v-for="item in salaryList" :key="item.id" label="" :value="item.content"></el-option>
             </el-select>
             <span v-if="!inputVisible">{{ followForm.targetSalary }}</span>
           </el-form-item>
           <el-form-item label="备注" style="width: 570px;" prop="remark">
            <el-input v-model="followForm.remark" placeholder="请输入"   maxlength="20"  show-word-limit v-show="inputVisible"></el-input>
            <span v-if="!inputVisible">{{ followForm.remark }}</span>
           </el-form-item>
        </el-form>
         </div>

        <!-- 客户意向 -->
         <div class="intention">
            <div class="customers">
             <div style="  margin-right: 5px; font-weight: 700;">客户意向</div> 
         </div>
         <div class="intentionFrom">
            <el-form  :model="followForm" :rules="followRules" ref="formRef2">
              <el-form-item label="意向学科" style="margin-left: 60px;" prop="subjects">
                <el-select v-model="followForm.subjects" placeholder="请选择" v-show="inputVisible">
                   <el-option v-for="item in disciplineList" :key="item.id" label="" :value="item.content"></el-option>
                </el-select>
                <span v-if="!inputVisible">{{ followForm.subjects }}</span>
              </el-form-item>
              <el-form-item label="学习原因" prop="studyReason">
                <el-input v-model="followForm.studyReason" placeholder="请输入" v-show="inputVisible"></el-input>
                <span v-if="!inputVisible">{{ followForm.studyReason }}</span>
              </el-form-item>
              <el-form-item label="职业计划" prop="careerPlans">
           <el-input v-model="followForm.careerPlans" placeholder="请输入" v-show="inputVisible"></el-input>
           <span v-if="!inputVisible">{{ followForm.careerPlans }}</span>
           </el-form-item>
           <el-form-item label="时间计划" prop="timePlans">
            <el-input v-model="followForm.timePlans" placeholder="请输入" v-show="inputVisible"></el-input>
           <span v-if="!inputVisible">{{ followForm.timePlans }}</span>
           </el-form-item>
           <el-form-item label="意向课程" style="margin-left: 60px;" prop="course">
           <el-select v-model="followForm.course" placeholder="请选择" v-show="inputVisible">
             <el-option v-for="item in courseListList" :key="item.id" label="" :value="item.content"></el-option>
           </el-select>
           <span v-if="!inputVisible">{{ followForm.course }}</span>
           </el-form-item>
           <el-form-item label="其他意向" style="width: 570px;" prop="otherNtentions">
            <el-input v-model="followForm.otherNtentions" placeholder="请输入"   maxlength="20"  show-word-limit v-show="inputVisible"></el-input>
            <span v-if="!inputVisible">{{ followForm.otherNtentions }}</span>
           </el-form-item>
            </el-form>
         </div>
         </div>

        <!-- 添加沟通记录 -->
         <div class="record">
          <div class="customers">
               <div style="  margin-right: 5px; font-weight: 700;">添加沟通记录</div> 
           </div>
           <div class="recordForm">
               <el-form :model="followForm" :rules="followRules" ref="formRef3">
                 <el-form-item label="跟进状态" style="margin-left: 60px;" prop="followStatus">
                    <el-select v-model.trim="followForm.followStatus" placeholder="请选择"  v-show="inputVisible">
                      <el-option v-for="item in trackStatusList" :key="item.id" label="" :value="item.content"></el-option>
                    </el-select>
                    <span v-if="!inputVisible">{{ followForm.followStatus }}</span>
                 </el-form-item>
                 <el-form-item label="下次跟进时间" prop="nextFollowTime">
                    <!-- <el-input v-model="followForm.nextFollowTime" placeholder="请输入" v-show="inputVisible"></el-input> -->
                        <el-date-picker v-model="followForm.nextFollowTime" type="date" placeholder="请选择下次跟进日期" />
                    <span v-if="!inputVisible">{{ followForm.nextFollowTime }}</span>
                 </el-form-item>
                 <el-form-item label="沟通重点" style=" margin-left: 60px;" prop="chatFocus">
                  <el-select v-model="followForm.chatFocus" placeholder="请选择"  v-show="inputVisible">
                      <el-option v-for="item in communicateList" :key="item.id" label="" :value="item.content"></el-option>
                    </el-select>
                      <span v-if="!inputVisible">{{ followForm.chatFocus }}</span>
                 </el-form-item>
                 <el-form-item label="沟通纪要" style="width: 570px; margin-left: 60px;" prop="chatNotes">
                      <el-input v-model="followForm.chatNotes" placeholder="请填写补充内容..."   maxlength="20"  show-word-limit  v-show="inputVisible"></el-input>
                      <span v-if="!inputVisible">{{ followForm.chatNotes }}</span>
                 </el-form-item>
                   
                 <el-row style="padding-top: 15px; margin-left: 807px;" v-show="inputVisible">
                   <el-button type="danger" @click="hideInput">保存</el-button>
                   <el-button type="" style="width: 150px;  background-color: #eaeaea;" @click="returnHighseasAPI">踢回公海</el-button>
                   <el-button type="" style="width: 150px;  background-color: #eaeaea;" @click="dialogVisible=true">转成交客户</el-button>
                 </el-row>
               </el-form>
           </div>
         </div>

         <!-- 历史沟通记录 -->
         <div class="history">
            <div class="customers">
               <div style="  margin-right: 5px; font-weight: 700;">历史沟通记录</div> 
            </div>
 
            <el-table  stripe style="width: 100%;margin-left:60px;" :data="historyList">
              <el-table-column prop="createTime" label="本次沟通时间" width="220" > </el-table-column>
              <el-table-column prop="nextFollowTime" label="下次沟通时间" width="220" > </el-table-column>
              <el-table-column prop="chatFocus" label="沟通重点" width="200"> </el-table-column>         
              <el-table-column prop="followStatus" label="沟通状态" > </el-table-column>
              <el-table-column prop="chatNotes" label="沟通纪要" width="200"> </el-table-column>
              <el-table-column prop="belonger" label="沟通人" width="220"> </el-table-column>
            </el-table>
         </div>
 
         <!-- 转成交 添加合同弹层 -->
         <div class="add-contract">
            <el-dialog
               title="添加合同"
               v-model="dialogVisible"
               width="30%"
               :before-close="handleClose"
             >
            <el-form >
              <el-form-item label="客户手机号">
                <el-input  placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="合同编号">
                <el-input  placeholder="请输入"></el-input>
              </el-form-item>            
            </el-form>
            <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                 >
                 <span style="margin-right: 30px; margin-left: 10px;">上传文件</span>
              <el-button  >点击上传</el-button>
                   
             </el-upload>
             <template #footer>
               <span class="dialog-footer">
                 <el-button @click="dialogVisible = false" style="background-color: #eaeaea;  color: #000;">取 消</el-button>
                 <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
               </span>
             </template>
        </el-dialog>
         </div>
    
         <!-- 退回公海原因弹层 -->
         <el-dialog
            title="退回公海"
            v-model="showdialog"
            width="30%"
            :before-close="handleClose"  
            >
               <el-form :model="returnData">
                 <el-form-item label="请选择原因:" prop="returnReason">
                  <el-select  placeholder="请选择踢回原因" v-model.trim="returnData.returnReason" >
                      <el-option v-for="item in returnReasonList" :key="item.id" label="" :value="item.content"></el-option>
                    </el-select>
                 </el-form-item>
               </el-form>
               <template #footer>
                 <span class="dialog-footer">
                   <el-button @click="showdialog = false">取 消</el-button>
                   <el-button type="primary" @click="returnOk">确 定</el-button>
                 </span>
               </template>
        </el-dialog>

    </div>
</template>

<style lang="less" scoped>
   .follow-up {
    width: 1300px;
    margin-top: -30px;
    margin-left: -30px;
    background-color: #fff;
  
    .customers {
        display: flex;
        width: 1220px;
        padding-left: 60px;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #dedcdc;
    }

    .customers-form {
        width: 1230px;
        padding-top: 15px;
      .el-form {
        display: flex;
        flex-wrap: wrap;

        .el-form-item{
           display: inline-block;
           margin-left: 30px;
           width: 270px;

           .el-select {
            width: 270px;
           }
        }
      }
    }

    .intention{

     .intentionFrom{
            padding-top: 15px;

         .el-form {
                display: flex;
                flex-wrap: wrap;
        
            .el-form-item{
                 display: inline-block;
                  margin-left: 30px;
                  width: 270px;

             .el-select {
                   width: 270px;
            }
        }
      }
     } 
    }

    .record{

      .recordForm{
        padding-top: 15px;
        padding-right: 50px;

         .el-form {
               display: flex;
               flex-wrap: wrap;

          .el-form-item{
             display: inline-block;
             margin-left: 30px;
             width: 270px;

           .el-select {
            width: 270px;
           }
        }
      }
      .el-button {
        width: 100px;
        height: 40px;
        border-radius: 20px;
      }
     }
    }

    .add-contract{
        .el-form{
            display: flex;

            .el-form-item {
                margin-left: 10px;
                display: inline-block;

            }
        }
        
            .el-button{
                background-color: #05cd95; 
                color: #ffffff; height: 35px;  
                 border-radius: 17px;
            }
        
    }
   }
</style>